<template>
    <div class="login-container">
      <h1 class="title">{{ mainStore.title }}</h1>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-item">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="data.loginForm.username"
            required
            placeholder="请输入用户名"
          />
        </div>
        <div class="form-item">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="data.loginForm.password"
            required
            placeholder="请输入密码"
          />
        </div>
        <button type="submit" class="login-button">登录</button>
      </form>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive } from 'vue';
  import { useMain } from '@/store/home';
  import { useRouter } from 'vue-router';
  import { loginApi } from '@/api/api';
  import { User } from '@/bean/User';
  
  const router = useRouter();
  const mainStore = useMain();
  
  const data = reactive({
    loginForm: {
      username: '',
      password: '',
    }
  });
  
  const apiTest = () => {
    // 演示使用调用后端接口
    loginApi.login('用户名', '密码').then(val => {
        let user = val as User
        console.log('登录之后的用户信息:', user);
        
    })
  }

  const handleLogin = () => {
    mainStore.setUserName(data.loginForm.username);
    router.push({ path: '/home' });
  };
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
    font-family: 'Arial', sans-serif;
  }
  
  .title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
  }
  
  .login-form {
    display: flex;
    flex-direction: column;
    width: 350px;
    padding: 20px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .form-item {
    margin-bottom: 20px;
  }
  
  label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
  }
  
  input {
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
  }
  
  input:focus {
    border-color: #007bff;
    outline: none;
  }
  
  .login-button {
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .login-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
  }
  </style>